<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
	  xmlns:t="http://myfaces.apache.org/tomahawk"
	  xmlns:a4j="http://richfaces.org/a4j"
	  xmlns:rich="http://richfaces.org/rich"
	  xmlns:owl="http://onto.agh.edu.pl/owl">

	<ui:composition template="templates/body_template.xhtml">

		<ui:define name="css">
			<link type="text/css" rel="stylesheet" href="css/graph/hypertree.css" />
			<link type="text/css" rel="stylesheet" href="css/onto.css" />
                        <h:commandButton>
                            <f:ajax render="foo"/>
                        </h:commandButton>
		</ui:define>


		<ui:define name="scripts">
			<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
			<!--<script language="javascript" type="text/javascript" src="scripts/graph/excanvas.js"/>-->
			<!--<script language="javascript" type="text/javascript" src="scripts/graph/core.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/canvas.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/hypertree.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/graph.js"/>
			-->
			<script language="javascript" type="text/javascript" src="scripts/graph/jit.js"/>
			<script language="javascript" type="text/javascript" src="scripts/graph/graph_new.js"/>
		</ui:define>

		<ui:define name="page_title">
			Ontology Browser
		</ui:define>

		<ui:define name="navright">
			<a4j:form id="visButton">
				<a4j:commandLink value="Hide Graph" styleClass="on" reRender="visButton, left"
					 action="#{browserMBean.changeGraphViewAction}" rendered="#{browserMBean.renderGraphView == 2}">
					<b>js</b>
				</a4j:commandLink>
				<a4j:commandLink value="Show Graph" styleClass="off" reRender="visButton, left"
					 action="#{browserMBean.changeGraphViewAction}" rendered="#{browserMBean.renderGraphView == 1}">
					<b>rich</b>
				</a4j:commandLink>

				<a4j:commandLink value="Show Graph" styleClass="off" reRender="visButton, left"
					 action="#{browserMBean.changeGraphViewAction}" rendered="#{browserMBean.renderGraphView == 0}">
					<b>off</b>
				</a4j:commandLink>
			</a4j:form>
		</ui:define>


		<ui:define name="content">
			<a4j:form>
				<t:div id="left" forceId="true">
					<t:div id="infovis" forceId="true" rendered="#{browserMBean.renderGraphView == 2}">
						<t:div id="label_container" forceId="true"></t:div>
						<t:div id="log" forceId="true"></t:div>
						
						<script type="text/javascript">
							//jQuery.ready(function(){
								init_graph();
							//});
							
							//init();
						</script>


					</t:div>

					<rich:tree id="treeRich" value="#{browserMBean.richTree}" var="item" nodeFace="#{item.type}" rendered="#{browserMBean.renderGraphView == 1}">
						<rich:treeNode type="0" iconLeaf="/images/tree_test/song.gif" icon="/images/tree_test/song.gif" >
							<h:outputText value="#{item.data}" onclick="ajaxWrapper('#{item.uri}')"/>
						</rich:treeNode>
					</rich:tree>

				</t:div>

				<t:div id="center" style="" forceId="true">
<!--
					<t:div rendered="#{browserMBean.selectedOntoItem != null and browserMBean.itemType== 0}">
						<owl:class bean="#{browserMBean.selectedOntoItem}"/>
					</t:div>

					<t:div rendered="#{browserMBean.selectedOntoItem != null and browserMBean.itemType==1}">
						<owl:instance bean="#{browserMBean.selectedOntoItem}"/>
					</t:div>

					<t:div rendered="#{browserMBean.selectedOntoItem != null and (browserMBean.itemType== 2 or browserMBean.itemType== 3)}">
						<owl:property bean="#{browserMBean.selectedOntoItem}"/>
					</t:div>
-->
					<t:div rendered="#{browserMBean.selectedOntoItem != null}">
						<owl:ontoEntity bean="#{browserMBean.selectedOntoItem}"/>
					</t:div>
					<t:div rendered="#{browserMBean.selectedOntoItem == null}">
						Nothing current selected
					</t:div>

					<a4j:commandLink value="Show Sources" action="#{browserMBean.updateViewAction}" reRender="right"/>
				</t:div>

				<t:div id="right" forceId="true">
					<h:outputText value="Individuals"/>
					<br/>
					<br/>

					<owl:instancesView bean="#{browserMBean.ontoInstances}" browserBean="#{browserMBean}" rendered="#{browserMBean.ontoInstances !=null}"/>

				</t:div>
				<a4j:jsFunction name="ajaxWrapper" action="#{browserMBean.updateViewAction}"
					reRender="right,center" ajaxSingle="true">
					<a4j:actionparam assignTo="#{browserMBean.selectedClassNodeURI}" name="selectedClassNodeURI"/>
				</a4j:jsFunction>
			</a4j:form>
		</ui:define>

		<ui:define name="pages">
			<h:form id="links">
				<h:commandLink id="prev"  styleClass="a_prev_on" value=". ."/>
				<h:commandLink id="A" value="A" />|
				<h:commandLink id="B" value="B" />|
				<h:commandLink id="C" value="C" />|
				<h:commandLink id="D" value="D" />
				<h:commandLink id="next"  styleClass="a_next_on" value=". ."/>
			</h:form>
		</ui:define>

	</ui:composition>
</html>
